<template>
  <!--顶部菜单-->
  <div class="top_menu">
    <div :class="menuState ? 'titles' : 'title'">
      <span v-if="!menuState">HT后台管理系统</span>
      <span v-else>HT</span>
    </div>

    <!-- Flex 容器 -->
    <div class="menu_actions">
      <div class="li_left">
        <el-icon v-if="menuState" @click="toggleMenuState">
          <Expand/>
        </el-icon>
        <el-icon v-else @click="toggleMenuState">
          <Fold/>
        </el-icon>
      </div>
      <div class="li_right">
        <user-pull-down>
          <span style="color: white" v-if="userInfo">
            {{ userInfo.name }}
            <el-icon><ArrowDown/></el-icon>
          </span>
        </user-pull-down>
      </div>
    </div>
  </div>
</template>


<script setup>
import UserPullDown from '@/components/auth/userPullDown.vue'

const config = inject('config')
const util = inject('util')
const menuState = inject('menuState')
const setMenuState = inject('setMenuState')
const userInfo = ref(util.getSession(config.sessionKey.USER_INFO))

const toggleMenuState = () => {
  setMenuState(!menuState.value)
}
</script>


<style scoped lang="scss">
.top_menu {
  width: 100%;
  height: 50px;
  display: flex;
  background: #334157;

  .title, .titles {
    width: 200px;
    text-align: center;
    font-size: 20px;
    color: white;
    line-height: 50px;
    cursor: pointer;
  }

  .titles {
    width: 65px;
  }

  .menu_actions {
    flex: 1;
    display: flex;
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中 */
    padding: 0 20px;
  }

  .li_left,
  .li_right {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: white;
  }

  .li_left .el-icon:hover {
    color: #169bd5;
  }
}
</style>

